// 加载购物车列表
/*
        接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
      接口请求方式：get
      接口参数：
           id  用户id
        */
loadCartList();
let xiaoleft = document.querySelectorAll(".right-xiaoleft");
let xiaoright = document.querySelectorAll(".right-xiaoright");
let pnum = document.querySelectorAll(".pnum");
let rightppric = document.querySelectorAll(".rightppric");
let heji = document.querySelectorAll(".heji");
let singleSelects = document.querySelectorAll(".single-select");
function loadCartList() {
  let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
  let id = localStorage.getItem("id");

  $.get(cartListAPI, { id }, function (res) {
    // 异步事件开始  注意这是一个异步
    console.log(res);
    let cartArr = res.data;
    console.log(cartArr);
    let resArr = cartArr
      .map(
        (v) => `
      <li>
          <div class="left left_left">
            <input type="checkbox" class="single-select" onclick="singleSelect(${
              v.pid
            },this)"/>
            <div class="left-neibu">
              <img src="${v.pimg}" width="122" height="122" alt="" />
              <span>${v.pname}</span>
            </div>
          </div>
          <div class="left right">
            <span class="rightppric">${v.pprice * 1}元</span>
            <div class="right-xiaodi">
              <span class="right-xiaoleft">-</span>
              <input type="text" value="${v.pnum}" onchange="numChange(${
          v.pid
        },this)" class="pnum" />
              <span class="right-xiaoright">+</span>
            </div>
            <p class='heji'>${v.pprice * v.pnum}元</p>
            <strong onclick="delCart(${v.pid})">×</strong>
          </div>
        </li>
    `
      )
      .join("");

    $(".list-box2").html(resArr);

    //  每生成一次列表都要同步捕捉一下以下需要用到的值
    singleSelects = document.querySelectorAll(".single-select");
    heji = document.querySelectorAll(".heji");
    rightppric = document.querySelectorAll(".rightppric");
    xiaoleft = document.querySelectorAll(".right-xiaoleft");
    xiaoright = document.querySelectorAll(".right-xiaoright");
    pnum = document.querySelectorAll(".pnum");
    // 左边的减号的点击事件
    xiaoleft.forEach(function (leftV, leftI) {
      leftV.onclick = function (v, i) {
        let lalal = pnum[leftI].value;
        console.log("点击了");
        if (lalal <= 1) {
          pnum[leftI].value = 1;
          alert("商品数量不可以小于1");
        } else {
          lalal--;
          pnum[leftI].value = lalal;
          $(pnum[leftI]).change();
          let aaa = parseInt(rightppric[leftI].innerText);
          let bbb = pnum[leftI].value;
          console.log(aaa);
          console.log(bbb);
          console.log(aaa * bbb);
          heji[leftI].innerText = aaa * bbb + "元";
        }
      };
      // console.log(heji[0]);
    });
    // 右边的加号的点击事件
    xiaoright.forEach(function (rightV, rightI) {
      rightV.onclick = function () {
        let lalal = pnum[rightI].value;
        lalal++;
        pnum[rightI].value = lalal;
        $(pnum[rightI]).change();
        let aaa = parseInt(rightppric[rightI].innerText);
        let bbb = pnum[rightI].value;
        console.log(aaa);
        console.log(bbb);
        heji[rightI].innerText = aaa * bbb + "元";
      };
    });
  });
}

// 数量改变事件

function numChange(pid, ipt) {
  let uid = localStorage.getItem("id");
  // console.log(uid);
  // console.log(pid);
  // console.log(ipt.value);
  let pnum = ipt.value;
  let updateCartNumAPI = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
  $.get(updateCartNumAPI, { uid, pid, pnum }, function (rrr) {});
}

// 删除功能

function delCart(pid) {
  let uid = localStorage.getItem("id");
  let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
  alert("确定要删除该商品吗？");
  if (alert) {
    $.get(delCartAPI, { uid, pid });
    loadCartList();
  }
}
// 单选事件
function singleSelect(pid, ipt) {
  // console.log(ipt.checked);

  calCountPrice();
  let arr = [...singleSelects];
  let isAllChecked = arr.every(function (v) {
    return v.checked === true;
  });
  document.querySelector(".all-sel").checked = isAllChecked;
}

// 全选按钮事件
function allSelChange(ipt) {
  singleSelects.forEach((v) => (v.checked = ipt.checked));
  calCountPrice();
}
function calCountPrice() {
  //  等会通过事件来调用此函数  因为上边的模板字符串在异步中发生，直接调用这个函数里边有的值捕捉不到
  console.log("lala");
  let obj = 0;
  singleSelects.forEach((iptss) => {
    console.log(iptss);
    if (iptss.checked == true) {
      let currentLi = iptss.parentNode.parentNode;
      // let pricess = currentLi.querySelector(".heji").innerHTML;
      let price = currentLi.querySelector(".heji").innerHTML;
      console.log(price);
      // let pnum = currentLi.querySelector(".pnum").value;
      obj = obj + parseInt(price);
      console.log(obj);
    }
  });
  $("#total_money").text(obj);
}
